<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores'
import { useGetTasksByClassificationService } from '@/api/task'

const route = useRoute()
const userStore = useUserStore()
// 用户id
const user_id = userStore.userId
// 分类id,从URL查询参数中获取classify_id
const classify_id = computed(() => {
  return Number(route.query.classify_id) || 0
})
// 分类名称
const classifyName = ref(route.params.classifyName)
// 分类任务列表
const tasksList = ref([])
// 获取分类任务列表
const getTasksByClassification = async () => {
  // 在请求前先清空任务列表
  tasksList.value = []
  const res = await useGetTasksByClassificationService({ user_id: user_id, classify_id: classify_id.value })
  tasksList.value = res.data.data || []
  console.log('分类任务列表:', JSON.stringify(tasksList.value))
}
// 初始加载和路由变化时获取任务
onMounted(() => {
  if (classify_id.value) {
    getTasksByClassification()
  }
})
watch(
  [
    () => route.params.classifyName,
    () => route.query.classify_id
  ],
 ([newClassifyName, newClassifyId]) => {
    classifyName.value = newClassifyName
    getTasksByClassification()
    console.log('更新后分类任务列表:', JSON.stringify(tasksList.value))
  },
  {
    immediate: true
  }
)
</script>

<template>
  <AddTasksContent 
    @refreshTasks="getTasksByClassification"
    :taskList="tasksList" 
    :classifyId="classify_id" 
    :classifyName="classifyName">
  </AddTasksContent>
</template>

<style lang="less" scoped>

</style>
